<template>
  <view class="page-container">
    <headerBar
        id="headerBar"
        :title="navTitle"
        navBarBgc="linear-gradient(180deg, rgba(167,197,184,1) 0%, rgba(180,206,194,0.5) 28%, rgba(212,226,220,.3) 100%)"
        @getHeaderBarHeight="handleHeaderBarHeight"
    ></headerBar>
    <view class="header-safe">
    </view>
    <view
      class="content-container"
    >
      <view class="provider-name">
        {{merchantInfo.name}}
      </view>
      <view class="register-time">
        {{entireYear}}年入驻
      </view>
      <view class="provider-location-container flex items-baseline justify-between">
        <view class="location flex-1">
          {{merchantInfo.address}}
        </view>
        <view class="operation-container flex ">
<!--          <view class="nav-container flex items-baseline mr10">
            <i class="iconfont icon-w_shangdian"></i>
            <text>地图</text>
          </view>-->
          <view class="nav-container flex items-end" @click="handleCallPhone">
            <wd-icon name="service" size="22px" color="#1b9c61"></wd-icon>
            <text>联系我们</text>
          </view>
        </view>
      </view>
      <wd-divider color="#EEF0DF" custom-class="custom-divider-class"></wd-divider>
      <scroll-view
        :scroll-x="true"
        class="category-container"
      >
        <view
            v-for="(item,index) in categoryTypeList"
            :key="index"
            :class="['category-item',item.value === choiceCategoryType ? 'choice-category-item' : '']"
            @click="selectCategoryType(item)"
        >
          {{item.label}}
        </view>
      </scroll-view>
      <ProductList
          :groupProductList="groupProductList"
          @navPage="NavProductDetail"
      ></ProductList>
    </view>
  </view>
</template>

<script setup>
  import {ref} from "vue";
  import {useMixin} from "@/hook/useMixin";
  import HeaderBar from "@/components/HeaderBar/index.vue";
  import ProductList from "@/specialtySubPack/components/productList/index.vue";
  import {specialtyProductDetail, specialtyProductList} from "@/api/specialty";
  import dayjs from "dayjs";

  const {dynamicGrouping} = useMixin();

  const navTitle = ref("");
  const productId = ref("");
  const categoryTypeList = ref([
    {value: "",label: "全部"},
    {value: 1,label: "文创"},
    {value: 2,label: "特产"},
  ]);
  const choiceCategoryType = ref("");
  const productList = ref([]);
  const groupProductList = ref([]);
  const entireYear = ref("");
  const merchantInfo = ref({
    address: "",
    contactMobile: "",
    name: ""
  });

  const selectCategoryType = (item) => {
    let {value} = item;
    choiceCategoryType.value = value;
    querySpecialtyProductList();
  };
  const handleCallPhone = () => {
    uni.makePhoneCall({
      phoneNumber: merchantInfo.value.contactMobile
    })
  };
  const handleHeaderBarHeight = (event) => {
    console.log(event,'event');
  };
  const NavProductDetail = (event) => {
    let {id} = event;
    uni.navigateTo({
      url: `/specialtySubPack/pages/specialtyProductDetail/index?productId=${id}`
    })
  };
  const querySpecialtyProductList = async () => {
    await specialtyProductList({
      pageQuery: {
        pageNo: 1,
        pageSize: 5,
        category: choiceCategoryType.value
      }
    }).then(res => {
      let {result} = res;
      productList.value = result;
      groupProductList.value = dynamicGrouping(productList.value,2);
    })
  };
  const querySpecialtyProduct = async () => {
    await specialtyProductDetail({productId:productId.value}).then(res => {
      let {merchant} = res.result;
      merchantInfo.value = merchant;
      entireYear.value = dayjs(merchant.createTime).format("YYYY");
    });
  };

  onLoad((options) => {
    console.log(options,"options");
    let {productId: _productId, providerName} = options;
    navTitle.value = providerName;
    productId.value = _productId;
    querySpecialtyProductList();
    querySpecialtyProduct();
  });

</script>

<style lang="scss" scoped>
  .page-container {
    width: 100%;
    min-height: 100vh;
    .header-safe {
      height: 120rpx;
      width: 100%;
      background: linear-gradient(180deg, rgba(212,226,220,.3) 0%, rgba(212,226,220,.3) 28%, rgba(212,226,220,.3) 100%);
    }
    .content-container {
      position: absolute;
      left: 0;
      top: 202rpx;
      box-sizing: border-box;
      width: 100%;
      padding: 48rpx 28.5rpx;
      background-color: #ffffff;
      border-top-left-radius: 10rpx;
      border-top-right-radius: 10rpx;
      .provider-name {
        font-size: 33.5rpx;
        font-weight: bold;
      }
      .register-time {
        width: 160rpx;
        margin: 26rpx 0 40rpx 0;
        padding: 4.5rpx 11rpx;
        font-size: 29rpx;
        border-radius: 10rpx;
        border: 2rpx solid #1B9C61;
        color: #1B9C61;
      }
      .provider-location-container {
        .location {
          height: 36rpx;
          font-size: 25rpx;
          width: 55%;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          color: #2B2B24;
        }
        .operation-container {
          .nav-container {
            .icon-w_shangdian {
              font-size: 50rpx;
              color:#1b9c61;
            }
            text {
              font-size: 25rpx;
            }
          }
        }
      }
      :deep(.custom-divider-class) {
        padding: 0 !important;
      }
      .category-container {
        align-items: center;
        white-space: nowrap;
        padding-bottom: 41rpx;
        .category-item {
          display: inline-block;
          margin-right: 20rpx;
          padding: 16rpx 53.5rpx;
          font-size: 33rpx;
          font-weight: 800;
          border-radius: 10rpx;
          background: #EEF0DF;
          color: #1B9C61;
        }
        .category-item:last-child {
          margin-right: 0;
        }
        .choice-category-item {
          font-weight: bold;
          color: #1B9C61;
        }
      }
    }
  }
</style>
